<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script src="../vue.js"></script>
  </head>

  <body>
    <div id="app">
      <button @click="changePerson">修改数组</button>
      <div>person:{{person}}</div>
    </div>
    <script>
      Vue.config.productionTip = false;

      const vm = new Vue({
        el: "#app",
        data() {
          return {
            person: ["余维海", "陈伟", "婉丽"],
          };
        },
        methods: {
          changePerson() {
            //1.直接通过下标修改数组:是不具备响应式的
            // this.person[0] = "余嗨嗨";

            //2.通过修改length来修改数据:是不具备响应式的
            // this.person.length = 1;

            //3. 使用数组的方法修改数组的值,数组的方法分为两类:修改原数组和返回新数组
            //3.1 修改原数组方式(变更方法)如下:push pop shift unshift sort reverse splice
            //Vue 将数组的变更方法进行了包裹，所以它们也将会触发视图更新
            // this.person.push("老李");

            //3.2 返回新数组:则可以直接替换原来的数组即可
            this.person = this.person.map((item) => {
              return item + "=。=";
            });
          },
        },
      });

      /* vue对数组变更方法包裹的伪代码 */
      /* function updateDOM() {
        //更新DOM函数
      }

      //保留旧的push方法
      const oldPush = Array.prototype.push;
      //重写push方法
      Array.prototype.push = function (...rest) {
        //调用旧的push方法
        oldPush.call(this, ...rest);
        //更新DOM
        updateDOM();
      }; */
    </script>
  </body>
</html>
